<template>
	<view class="course-header">
		<image class="img" :src="course.mainImage" lazy-load></image>
		<view class="header-info">
			<view class="price-info" >
				<text v-if="course.isFree">免费</text>
				<block v-else>
					<text v-if="course.priceDiscount">￥{{course.priceDiscount}}</text>
					<text :class="{price: course.priceDiscount}">￥{{course.priceOriginal}}</text>
					<text v-if="course.priceDiscount" class="youhui">优惠价</text>
				</block>
			</view>
			<view class="title">
				{{course.title}}
			</view>
			<view class="count">
				<text class="iconfont icon-haoping2">{{course.goodRate}}好评</text>
				<text class="iconfont icon-touxiang2">{{course.studyTotal}}人在学</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			course: {
				type: Object,  
				default: ()=>({
					"id": 10,  
					"title": "uni-app兼容多端在线教育视频教程",  
					"studyTotal": 580,  
					"goodRate": '100%',  
					"mainImage": 'https://gd4.alicdn.com/imgextra/i4/3603079088/O1CN01dczOSM2H0LvTowhkl_!!3603079088.png',  // 主图URL
					"isFree": 0, // 0 付费，1免费
					"priceOriginal": 699.99, 
					"priceDiscount": 599.99, 
				})
			}
		}
	}
</script>

<style lang="scss">
	// 课程头部样式
	.course-header {
		.img {
			width: 750rpx;  // 宽度
			height: 420rpx; // 高度
		}
		.header-info {
			padding: 25rpx;  // 内边距
			background-color: #fff;  // 背景颜色
			border: 25rpx solid $mxg-color-grey;  // 边框
			border-left: 0;  // 左边框
			border-right: 0; // 右边框
		}
		.price-info {
			text {
				margin-right: 15rpx;  // 右外边距
				&:first-child {
					color: $mxg-text-color-red;  // 文字颜色
					font-size: 46rpx;  // 字体大小
					font-weight: bold; // 字体加粗
				}
			}
			.price {
				color: #b6bbbf;  // 文字颜色
				font-size: 30rpx; // 字体大小
				text-decoration: line-through; // 删除线
			}
			.youhui {
				font-size: 20rpx;  // 字体大小
				color: $mxg-text-color-red;  // 文字颜色
				border: 1px solid $mxg-text-color-red;  // 边框
				border-radius: 10rpx;  // 圆角
				padding: 0 3rpx;  // 内边距
			}
		}

		.title {
			font-size: 35rpx;  // 字体大小
			font-weight: bold; // 字体加粗
			color: #1d1d1f;    // 文字颜色
			padding-left: 8rpx; // 左内边距
		}

		.count {
			padding: 15rpx 0;  // 上下内边距
			text {
				margin-right: 15rpx;  // 右外边距
				font-size: 20rpx;     // 字体大小
				color: #7d828f;       // 文字颜色
				background-color: $mxg-color-grey;  // 背景颜色
				padding: 15rpx;       // 内边距
				border-radius: 30rpx; // 圆角
			}
		}
	}
</style>
